import React, { createContext, useContext, useState } from 'react';
 
// 创建一个 Context，默认值为 'light'
const ThemeContext = createContext('light');
 
function Theme() {
//  let theme = 'dark';
// 使用普通变量，改变变量时，是无法触发页面渲染
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}> {/* 提供共享的 theme 值 */}
      <div>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
          切换主题
        </button>
        <ComponentA />
        <ComponentB />
      </div>
    </ThemeContext.Provider>
  );
}
 
function ComponentA() {
    // 使用 useContext 获取当前 theme 值
    const theme = useContext(ThemeContext);
    return <div style={{ background: theme === 'dark' ? 'black' : 'white',color: theme === 'dark' ? 'white' : 'black' }}>组件A,使用主题：{theme}</div>;
}
function ComponentB() {
    // 使用 useContext 获取当前 theme 值
    const theme = useContext(ThemeContext);
    return <div style={{ background: theme === 'dark' ? 'black' : 'white',color: theme === 'dark' ? 'white' : 'black' }}>组件B,使用主题：{theme}</div>;
}
export default Theme;
 